<template>
  <Card title="统计趋势" v-bind="$attrs" :loading="loading">
    <template #extra>
      <a-radio-group v-model:value="dayType" @change="handleDayTypeChange">
        <a-radio :value="1">最近7天</a-radio>
        <a-radio :value="2">最近30天</a-radio>
      </a-radio-group>
    </template>
    <LineMulti :chartData="lineMultiData" height="50vh" type="line" :option="{ legend: { top: 'bottom' } }"></LineMulti>
  </Card>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { Card } from "ant-design-vue";
import LineMulti from "/@/components/chart/LineMulti.vue";
import { queryIndexChartList } from "/@/api/sys/index";

const dayType = ref(1);
const lineMultiData = ref([]);
const loading = ref(true);
const companyId = ref("");
const props = defineProps({
  curCompanyId: { type: String, },
});

watch(
  () => props.curCompanyId,
  (newVal, oldVal) => {
    companyId.value = newVal;
    //初始化数据
    initIndexChartInfo(companyId.value,dayType.value);
  }
);

  /**
   * 查询统计数据
   * @param dayType
   */
  function initIndexChartInfo(companyId,dayType) {
    // loading.value = true;
    queryIndexChartList({companyId: companyId, dayType: dayType}).then((res) => {
      if (res.success) {
        lineMultiData.value = [];
        res.result.rechargeSum.forEach((item) => {
          lineMultiData.value.push({ name: item.y, type: '充值金额', value: item.r_money });
        });
        res.result.taskSettleSum.forEach((item) => {
          lineMultiData.value.push({ name: item.y, type: '下发金额', value: item.w_money });
        });
      }
    }).finally(() => {
      loading.value = false
    });
  }

  /**
   * 单选框改变事件
   * @param e
   */
  function handleDayTypeChange(e){
    initIndexChartInfo(companyId.value,dayType.value);
  }
</script>
